<template>
  <div id="qr-code">
    <i :class="icon"></i>
    <slot></slot>
    <span class="img" :style="`top: ${offsetTop}px`">
      <img :src="src" :alt="alt" />
    </span>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    icon: Array,
    src: String,
    alt: String,
    offsetTop: Number,
  },
};
</script>

<style lang="less" scoped>
#qr-code {
  position: relative;
  line-height: 36px;
  background-color: #b35f30;
  margin: 10px 0;
  padding: 0 15px;
  left: -1.8em;
  transition: left 0.3s;
  font-size: 24px;
  font-family: "hanbiao";
  &::before {
    content: "";
    display: block;
    border-color: transparent transparent transparent #b35f30;
    border-width: 18px;
    border-style: solid;
    position: absolute;
    right: -36px;
    top: 0;
  }
  &::after {
    position: absolute;
    content: "";
    display: none;
    border-color: transparent #efefef transparent transparent;
    border-width: 10px 36px;
    border-style: solid;
    right: -64px;
    top: 8px;
  }
  &:hover {
    left: 0;
    &::after {
      display: inline-block;
    }
    .img {
      display: inline-block;
    }
  }
  .img {
    position: absolute;
    display: inline-block;
    background-color: #efefef;
    padding: 10px;
    border-radius: 8px;
    right: -174px;
    display: none;

    img {
      width: 100px;
      vertical-align: bottom;
    }
  }
}
</style>